<template>
  <div id="Head">
        <el-menu :default-active="activeIndex" mode="horizontal" background-color="rgba(220,220,220,1)" text-color="black"
          active-text-color="#ffffff68" border-radius="18px">
          <el-menu-item index="1">Home</el-menu-item>
          <el-menu-item index="2">搜索</el-menu-item>
          <el-menu-item index="3">轨迹</el-menu-item>
          <el-menu-item index="4">人物星图</el-menu-item>
          <h3 class="title">杜甫诗人可视化</h3>
          <span class="time">{{ nowDateTime }}</span>
        </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Head',
  data() {
    return {
      activeIndex: '1', // 菜单默认激活项
      nowDateTime: '', // 当前日期时间
    }
  },
  created() {
    this.currentTime();
  },
  methods: {
    currentTime() {
      let that = this;
      setInterval(() => {
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
        that.nowDateTime = yy + '/' + mm + '/' + dd + '/ ' + hh + ':' + mf + ':' + ss;
      }, 500);
    },

  }
};

</script>

<style>
 /* #Head{
   background-image: url(../assets/背景图.png);
    background-size: cover;
      background-repeat: no-repeat; 
     
}  */
.title {
  margin: 5; /* 移除默认边距 */
  color:black; 
  /* 调整文字颜色 */
  /* color:aquamarine; */
  font-size: 25px; /* 调整字体大小 */
  text-align: center; /* 文本水平居中 */
  font-weight: bold; /* 调整字体粗细 */
  font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.el-menu {
  /* background-color: #909399; */
  /* 同步导航栏背景色 */
 
   border-style: solid;
    border-color:rgba(255, 255, 255, 0.404);
   
  border-radius:30px;
  width: 100%;
  height: 10%;
}

.el-menu-item {
  border-radius: 30px;
  /* 给菜单项添加圆角 */
}

.el-menu-item:hover,
.el-menu-item.is-active {
  background-image: url('/src/assets/dufu.jpg'); /* 添加背景图片 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中放置 */
  background-size: cover; /* 背景图片覆盖整个元素 */
}

/* 添加时间显示的样式 */
.time {
  margin-left: 30px; /* 调整时间显示的边距 */
  color: rgb(18, 18, 18); /* 调整时间显示颜色 */
  font-size: 14px; /* 调整字体大小 */
}
</style>


